<script lang="ts" setup>
import { defineProps, ref, defineEmits } from 'vue';
const { arr } = defineProps<{ arr: any }>()
const emits = defineEmits(['changeText'])
const active = ref<number>(-1)
const changeText = (index: number) => {
  if (active.value !== index) {
    active.value = index
  } else {
    active.value = -1
  }
  // 通过changeText事件获取选择的对象
  emits('changeText', arr[active.value])
}
</script>
<!-- 传入一个数组 格式类似 [{text: 值, ... },...] -->
<template>
  <div class="selector">
    <div class="item" @click="changeText(index)" :class="active === index ? 'active' : ''"
      v-for="(item, index) in arr ">
      {{ item.text }}
    </div>
  </div>

</template>
<style lang="scss" scoped>
.selector {
  display: flex;

  .item {
    padding: 10px 14px;
    border: 1px solid transparent;
    border-radius: 5px;
    background-color: #f5f5f5;
    margin-right: 12px;
    font-size: 13px;
  }

  .item:last-child {
    margin: 0;
  }

  .active {
    border-color: #2cb5a5;
    background-color: #e9f7f6;
    color: #2cb5a5;
  }
}
</style>
